<template>
  <div class="form_wrap">
    <el-button type="danger" icon="el-icon-close" plain class="del" @click="removeApp" v-if="!disabledAppid">删除应用</el-button>
    <router-link :to="{name: 'applicationDetail', query: {id: this.appId,appName:this.form.name}}" class="addResource">
      <el-button type="primary">配置资源</el-button>
    </router-link>
    <span class="icon">
      <el-image :src="form.icon" fit="contain">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </span>
    <div class="ope">
      <el-upload :action="serverPath" with-credentials :before-upload="beforeUpload" :on-success="successUploadCallback" :show-file-list="false">
        <span>上传</span>
      </el-upload>
      <span @click="showIcon=true">内置</span>
    </div>
    <div class="form">
      <div class="form_item">
        <span class="label">应用名称</span>
        <el-input v-model="form.name" placeholder="请输入应用名称" @blur="editApp('name')" :disabled="disabledAppid"></el-input>
      </div>
      <div class="form_item">
        <span class="label">访问地址</span>
        <el-input v-model="form.url" placeholder="请输入访问地址" @blur="editApp('url')" :disabled="disabledAppid"></el-input>
      </div>
      <div class="form_item">
        <span class="label">应用分类</span>
        <el-cascader :disabled="disabledAppid" ref="parentIdCascader" :value="form.categoryId" :options="appList" :props="{ checkStrictly: true, value: 'id', label:'name', children:'children' }" @change="parentIdChange" style="flex:1"></el-cascader>
      </div>
      <div class="form_item">
        <span class="label">应用描述</span>
        <el-input type="textarea" :disabled="disabledAppid" :rows="2" placeholder="请输入内容" v-model="form.description" @blur="editApp('description')">
        </el-input>
      </div>
      <div class="form_item switch_group">
        <div>
          <span class="label">禁用 / 激活</span>
          <el-switch :disabled="disabledAppid" v-model="form.enabled" active-color="#5978E2" inactive-color="#ff4949" :active-value="true" :inactive-value="false" @change="editApp('enabled')">
          </el-switch>
        </div>
        <div>
          <span class="label">第三方应用</span>
          <el-switch :disabled="disabledAppid" v-model="form.thirdApp" active-color="#5978E2" inactive-color="#ff4949" :active-value="true" :inactive-value="true" @change="editApp('thirdApp')">
          </el-switch>
        </div>
      </div>
      <div class="form_item other">
        <div>
          <span class="label">应用管理员：{{form.modifier}}</span>
        </div>
        <div>
          <span class="label">创建人：{{form.creator}}</span>
        </div>
      </div>
    </div>
    <icon :show.sync="showIcon" @changeIcon="changeIcon"></icon>
  </div>
</template>
<script>
import icon from '../components/icon'
import {prodUrl} from '@/tools/utils'
import uploadServer from '@api/uploadServer'
import {getAppUsingGET, updateAppUsingPUT, deleteAppUsingDELETE} from '@api/systemManage'
export default {
  components: {icon},
  props: {
    appList: Array
  },
  data () {
    return {
      showIcon: false,
      loading: false,
      dialogVisiable: false,
      serverPath: uploadServer.uploadFile, // 图片上传服务
      accept: ['jpg', 'jpeg', 'png'], // 允许上传的文件格式
      // 应用
      form: {
        categoryId: null,
        code: null,
        createTime: null,
        creator: null,
        deleted: null,
        description: null,
        enabled: null,
        icon: null,
        id: null,
        modifier: null,
        modifyTime: null,
        name: null,
        sort: null,
        thirdApp: null,
        type: null,
        url: null,
        version: null
      },
      appId: null,
      // 保存所有管理员的name和Sn的列表，用于根据sn取name
      keepAllUserList: []
    }
  },
  computed: {
    disabledAppid () {
      return Number(this.appId) === 57
    }
  },
  watch: {
    $route () {
      // this.$parent.reload()
      this.form = {}
      this.init()
    }
  },
  created () {
    this.serverPath = uploadServer.uploadFile // location.protocol + '//' + location.host + '/fastdfs/fileObject/upload/common/sample'
    this.init()
  },
  methods: {
    prodUrl,
    // 初始化
    init () {
      if (this.$route.query.id) {
        this.appId = this.$route.query.id
        console.log(' app query', this.appId)
        if (!this.appId) return
        this.getDetails()
      }
    },
    // 获取详情
    getDetails (id = this.appId) {
      getAppUsingGET(id).then(res => {
        this.form = res.data
      })
    },
    // 删除应用
    removeApp () {
      if (!this.appId) return
      this.$confirm('确认删除该应用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteAppUsingDELETE(this.appId).then(res => {
          if (res.status) this.$emit('delCateOrApp')
        }).finally(() => {
          this.loading = true
        })
      })
    },
    // 编辑应用
    editApp (key, keyName, require) {
      updateAppUsingPUT(this.appId, this.form).then(res => {
        if (res.status) {
          this.getDetails()
          this.$emit('refreshCates')
        }
      })
    },
    // 分类变化
    parentIdChange (value) {
      if (value) {
        this.form.categoryId = value[value.length - 1]
        this.editApp('categoryId')
      }
    },
    // 选择头像
    changeIcon (newIcon) {
      if (this.form.icon != newIcon) {
        this.form.icon = newIcon
        this.editApp('icon', '应用图标', true)
      }
    },
    beforeUpload (file) {
      const oversize = file.size / 1024 / 1024 < 10
      let isCorrectFormat = false
      this.accept.map(item => {
        if (file.name.indexOf(`.${item}`) !== -1) isCorrectFormat = true
      })
      if (!oversize) {
        this.$message.error('单个文件大小不能超过 10MB')
      }
      if (!isCorrectFormat) {
        this.$message.error(`仅支持${this.accept.join('、')}格式的文件`)
      }
      return oversize && isCorrectFormat
    },
    successUploadCallback (res) {
      if (res.success) {
        this.form.icon = `${uploadServer.downloadImg}?filePath=${res.filePath}`
        this.editApp('icon', '应用图标', true)
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../../../../assets/variate.less";
.del {
  position: absolute;
  top: 20px;
  right: 0px;
}
.addResource {
  position: absolute;
  top: 20px;
  right: 112px;
}
.form_wrap {
  padding: 70px 0;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  // 上传，内置按钮
  .ope {
    margin: 28px 0 58px;
    font-size: 0;
    display: flex;
    span {
      display: inline-block;
      .btn(#fff, #5978e2, 28px);
      font-size: 14px;
      border: 1px solid #5978e2;
      &:last-child {
        margin-left: 15px;
      }
    }
  }
}
.icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  line-height: 84px;
  text-align: center;
  .el-icon-bell {
    vertical-align: middle;
    color: #fff;
    font-size: 40px;
  }
}
.form_item {
  display: flex;
  line-height: 36px;
  margin-bottom: 20px;
  .label {
    color: #666666;
    font-size: 14px;
    margin-right: 10px;
  }
  > .label {
    width: 80px;
    text-align: right;
  }
  /deep/.el-input,
  /deep/.el-select,
  .wh {
    flex: 1;
  }
  &.other {
    /deep/.el-select {
      width: 200px;
      .el-input {
        width: 100%;
      }
    }
  }
}
.switch_group,
.other {
  justify-content: space-between;
  > div {
    display: flex;
    align-items: center;
  }
  .label {
    margin: 10px;
  }
}
.form {
  width: 700px;
  .addmin_style {
    width: 500px;
    span {
      display: inline-block;
      width: 240px;
      color: #18a7e7;
      font-size: 14px;
    }
  }
}
</style>
